<!-- eslint-disable vuejs-accessibility/click-events-have-key-events -->
<template>
  <div class="article-page">
    <!-- 头部 -->
    <header>
      <div class="left">共 {{total}} 条记录</div>
      <div class="right">
        <el-button type="primary" size="mini" round @click="addArticle">
          <i class="el-icon-plus"></i>创建
        </el-button>
      </div>
    </header>
    <!-- 表格 -->
    <div class="table-box">
      <el-table :data="tableData" stripe style="width: 99%;">
        <el-table-column prop="stem" label="标题" width="350"></el-table-column>
        <el-table-column prop="creator" label="作者" width="120"></el-table-column>
        <el-table-column prop="likeCount" label="点赞" width="80"></el-table-column>
        <el-table-column prop="views" label="浏览" width="80"></el-table-column>
        <el-table-column prop="createdAt" label="创建日期" width="200"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <div class="handler-box">
              <i @click="showView(scope.row.id)" class="el-icon-ice-cream-round"></i>
              <!-- eslint-disable-next-line max-len -->
              <i @click="isShowDrawerEdit = true; articleId = scope.row.id;" class="el-icon-edit"></i>
              <i class="el-icon-delete"></i>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 分页 -->
    <div class="pagination-box">
      <!-- eslint-disable-next-line max-len -->
      <el-pagination
        background
        layout="prev, pager, next"
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage"
        :page-size="pageSize"
        :total="total"
      ></el-pagination>
    </div>

    <!-- 查看弹窗 -->
    <view-com
      ref="viewCom"
      :article-id="articleId"
      :is-show="isShowDrawerView"
      @close="isShowDrawerView = false"
    />
    <!-- 编辑弹窗 -->
    <edit-com
      v-if="isShowDrawerEdit"
      :article-id="articleId"
      :is-show="isShowDrawerEdit"
      @close="isShowDrawerEdit = false"
      @updateData="getArticleList"
    />
  </div>
</template>

<script>
// eslint-disable-next-line import/no-cycle
import { getArticleList } from '@/api/article';
import EditCom from './components/edit.vue';
import ViewCom from './components/view.vue';

export default {
  name: 'article-page',
  props: {},
  components: {
    EditCom,
    ViewCom,
  },
  data() {
    return {
      tableData: [],
      total: 0,
      pageSize: 10,
      currentPage: 1,
      isShowDrawerView: false,
      isShowDrawerEdit: false,
      articleId: null,
    };
  },
  computed: {},
  watch: {},
  created() {
    this.getArticleList();
  },
  mounted() {},
  methods: {
    addArticle() {
      this.articleId = null;
      this.isShowDrawerEdit = true;
    },
    showView(articleId) {
      this.isShowDrawerView = true;
      this.$refs.viewCom.show(articleId);
    },
    handleCurrentChange() {
      // this.currentPage = val;
      this.getArticleList();
    },
    async getArticleList() {
      const { data } = await getArticleList({
        current: this.currentPage,
        pageSize: this.pageSize,
      });
      this.total = data.total;
      this.tableData = data.rows;
    },
  },
};
</script>

<style lang="less" scoped>
.article-page {
  border: 1px solid #ccc;
  background-color: pink;
  // height: 300px;
  margin: 20px 15px;
  border-radius: 5px;
}
header {
  display: flex;
  justify-content: space-between;
  height: 70px;
  align-items: center;
  padding: 0 20px;
  border-bottom: 1px solid #ccc;
}
// 表格
.pagination-box {
  height: 70px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.tablepage {
  padding-left: 20px;
}
.handler-box {
  i {
    font-size: 18px;
    margin: 0 5px;
  }
}
</style>
